<template>
    <div class="myCharts">
        <div class="title-top">
            <div class="title-top-line"></div>
            <div>{{title}}</div>
            <div v-if="select_list.length > 0">
                <el-select v-model="selected_value" @change="selectChange" size="mini" clearable>
                    <el-option
                        v-for="item in select_list"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
        </div>
        <div id="myChart" :style="pass_style">
        </div>
    </div>
</template>
 

<script>
export default {
    name:"zxEchart",
    props:{
        title:'',        //标题
        day:{            //横坐标
            type: Array,
            default: () => []
        },
        charge_money:{       //充值金额纵坐标
            type: Array,
            default: () => []
        },   
        dispatch_money:{         //代发金额纵坐标
            type: Array,
            default: () => []
        },     
        invoice_money:{         //代发金额纵坐标
            type: Array,
            default: () => []
        },
        trade_money:{           //交易金额
            type: Array,
            default: () => []
        },
        select_list:{           //图表过滤选择
            type: Array,
            default: () => []
        },
        pass_style: ''
    },
    data(){
        return {
            orgOptions:{},
            selected_value: null        //选中的值

        }
    },
    watch: {
        day(new_value){
            this.drawColumn();

        }

    },

    methods:{
        drawColumn(){
            this.myChart = this.$echarts.init(document.getElementById('myChart'))
            let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: '#dddc6b'
                            }
                        }
                    },
                    grid: {
                        left: '10',
                        top: '30',
                        right: '10',
                        bottom: '10',
                        containLabel: true
                    },
                    legend: {
                        data: ['充值金额', '代发金额','发票金额']
                    },

                    xAxis: [{
                        type: 'category',
                        boundaryGap: true,
                        axisLabel: {
                            textStyle: {
                                color: "rgba(162,162,162,.6)",
                                fontSize: 12,
                            },
                            formatter: '{value}'
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(162,162,162,.2)'
                            }

                        },
                        data: this.day
                    }],
                    yAxis: [{           
                        type: 'value',
                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(60,121,237,.1)'
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "rgba(53,189,153,.6)",
                                fontSize: 12,
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(60,121,237,.1)'
                            }
                        }
                    }]

            };
            option.series = [];
            let charge_money_dataJson = {
                    name: '充值金额',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            color: '#3C79ED',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, 
                                    [{
                                        offset: 0,
                                        color: 'rgba(60,121,237, 0.8)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(60,121,237, 0.1)'
                                    }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#0184d5',
                            borderColor: 'rgba(60,121,237, .1)',
                            borderWidth: 12
                        }
                    },
                    data: this.charge_money
                };
            let dispatch_money_dataJson = {
                    name: '代发金额',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            color: 'rgba(53,189,153,1)',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, 
                                    [{
                                        offset: 0,
                                        color: 'rgba(53,189,153, 0.8)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(53,189,153, 0.1)'
                                    }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(53,189,153,1)',
                            borderColor: 'rgba(53,189,153, .1)',
                            borderWidth: 12
                        }
                    },
                    data: this.dispatch_money
            };
            let invoice_money_dataJson = {
                    name: '发票金额',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {           //F86C6B
                            color: 'rgba(248,108,107,1)',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, 
                                    [{
                                        offset: 0,
                                        color: 'rgba(248,108,107, 0.8)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(248,108,107, 0.1)'
                                    }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(248,108,107,1)',
                            borderColor: 'rgba(248,128,107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: this.invoice_money
            };

            let trade_money_dataJson = {
                name: '交易金额',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {           //F86C6B
                            color: 'rgba(248,108,107,1)',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, 
                                    [{
                                        offset: 0,
                                        color: 'rgba(248,108,107, 0.8)'
                                    }, {
                                        offset: 0.8,
                                        color: 'rgba(248,108,107, 0.1)'
                                    }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(248,108,107,1)',
                            borderColor: 'rgba(248,128,107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: this.trade_money
            }

            //下面分别标出不同的线：充值、代发、发票
            if(this.charge_money.length > 0)    option.series.push(charge_money_dataJson);
            if(this.dispatch_money.length > 0)  option.series.push(dispatch_money_dataJson);
            if(this.invoice_money.length > 0)  option.series.push(invoice_money_dataJson);
            if(this.trade_money.length > 0)  option.series.push(trade_money_dataJson);


            this.myChart.setOption(option);
        },

        selectChange(){         //切换下拉框触发事件
            this.$emit('selectChange', this.selected_value);
        }
    },


    mounted(){
        this.drawColumn();
        //当窗口改变时，改变图标的尺寸
        window.addEventListener('resize', ()=>{
            this.myChart.resize();
        })

    }
}
</script>


<style lang="less"  :scope="true">
.myCharts{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    #myChart{
         position: relative;
         margin-left: 5%;
         margin-top: 30px;
    }
    .title-top{
        height: 45px;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 14px;
        background: #ffffff;
        color: #000000;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1000;
        .title-top-line{
            width: 2.5px;
            height: 20px;
            background: #4280F2;
            margin-left: 10px;
        }
        div{
            margin-left: 10px;
        }
    }
}
</style>